<script lang="ts" setup>
import 'vue-cropper/dist/index.css'
import { ref, watch, computed, nextTick } from 'vue'
import VueCropper from '@/components/vueCropper/index.vue'
import { useMainStore } from '@/store/main'
import { mlxxMainStore } from '@/store/mlxx'
import { ElMessage, ElLoading } from 'element-plus'
import rotateDialog from '@/views/gdgl/gdzl/ajwjgl/dialog/rotate-dialog.vue'
import ldDialog from '@/views/gdgl/gdzl/ajwjgl/dialog/ld-dialog.vue'
import { useRoute } from 'vue-router'
import wsjzglService from '@/api/wsjzgl'
import gdglService from '@/api/gdgl'
import lodash from 'lodash'
import wjfwService from '@/api/wjfw'
const route = useRoute()
const store = useMainStore()
const mlxxStore = mlxxMainStore()
const cropperRefss = ref()

// 入参
const props = defineProps<{
  currentItem: any
  wjxqxxList: any
}>()
const emit = defineEmits(['close', 'indexChange', 'refreshOperate'])
const tempValue = ref<any>(props.currentItem)
const fileUrl = ref()
// let fileUrl = computed(() => {
//   return `${window.IPCONFIG}/fpi/wjfw/download?wjbh=${tempValue.value.jpgwjxh}&date=${Date.now()}`
// })
// 插销list集合

const close = () => {
  emit('close')
}

// 裁剪组件需要使用到的参数
const options = ref({
  img: fileUrl.value, // 需要剪裁的图片
  mode: 'contain',
  canMove: true,
  size: 1,
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: 150, // 默认生成截图框的宽度
  autoCropHeight: 150, // 默认生成截图框的长度
  fixedBox: false, // 是否固定截图框的大小 不允许改变
  info: true, // 裁剪框的大小信息
  outputSize: 1, // 裁剪生成图片的质量 [1至0.1]
  outputType: 'png', // 裁剪生成图片的格式
  canScale: true, // 图片是否允许滚轮缩放
  fixed: true, // 是否开启截图框宽高固定比例
  fixedNumber: [1, 1], // 截图框的宽高比例 需要配合centerBox一起使用才能生效 1比1
  full: true, // 是否输出原图比例的截图
  canMoveBox: true, // 截图框能否拖动
  original: false, // 上传图片按照原始比例渲染
  centerBox: true, // 截图框是否被限制在图片里面
  infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
  accept: 'image/jpeg,image/jpg,image/png,image/gif,image/x-icon',
})

// 放大操作
const enlargeClick = () => {
  cropperRefss.value.changeScale(10)
}
// 缩小操作
const narrowClick = () => {
  cropperRefss.value.changeScale(-10)
}
// 旋转操作
const rotateRef = ref()
const rotateClick = () => {
  const file = base64ToFile(fileUrl.value, '保存')
  rotateRef.value.openDialog(file)
}

// 纠偏操作
const correctClick = () => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  const params = {
    ajbh: store.nodeTreeData.ajbh,
    bmsah: route.query.bmsah,
    gdbh: route.query.gdbh,
    mlbh: store.nodeTreeData.bh,
    wjbhList: [props.currentItem.wjbh],
  }
  wsjzglService
    .pictureJp(params, route.query.ajbh as string)
    .then((res) => {
      revokeList.value.push({
        img: fileUrl.value,
        czmc: '纠偏',
      })
      fileUrl.value = 'data:image/png;base64,' + res.data[0]?.base64Str
      cacheInde.value++
      cacheIndexs.value = 0
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.close()
    })
}

// 去黑边操作
const clearBlackBorder = () => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  const params = {
    ajbh: store.nodeTreeData.ajbh,
    bmsah: route.query.bmsah,
    gdbh: route.query.gdbh,
    mlbh: store.nodeTreeData.bh,
    wjbhList: [props.currentItem.wjbh],
  }
  wsjzglService
    .pictureQhb(params, route.query.ajbh as string)
    .then((res) => {
      revokeList.value.push({
        img: fileUrl.value,
        czmc: '去黑边',
      })
      fileUrl.value = 'data:image/png;base64,' + res.data[0]?.base64Str
      cacheInde.value++
      cacheIndexs.value = 0
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.close()
    })
}

// 黑白增强
const hbzqClick = () => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  const params = {
    jpgwjxh: props.currentItem.jpgwjxh,
    wjbh: props.currentItem.wjbh,
  }
  wsjzglService
    .pictureHbzq(params, route.query.ajbh as string)
    .then((res) => {
      revokeList.value.push({
        img: fileUrl.value,
        czmc: '黑白增强',
      })
      fileUrl.value = 'data:image/png;base64,' + res.data.base64Str
      cacheInde.value++
      cacheIndexs.value = 0
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.close()
    })
}

const isCrop = ref<boolean>(false)

// 框选
const toggleCrop = () => {
  cropperRefss.value?.startCrop()
  cropperRefss.value?.clearCrop()
  isCrop.value = true
}

// 拖动
const dragCrop = () => {
  cropperRefss.value?.clearCrop()
  cropperRefss.value?.stopCrop()
  isCrop.value = false
}

// 框选之后裁剪
const cropClick = () => {
  if (isCrop.value) {
    cropperRefss.value.getCropBlob((data: any) => {
      const url = getObjectURL(data)
      imageUrlToBase64(url)
    })
  }
}

const ldRef = ref()
// 亮度
const brightClick = () => {
  ldRef.value.openDialog()
}

// 子传父-》 亮度弹窗
const submitBright = (num: number) => {
  cropperRefss.value?.getCropData(() => {
    // 再更新亮度調整後的圖片
    cropperRefss.value?.getCropBrightData((img: string) => {
      setImgOption({ img })
      revokeList.value.push({
        img: img,
        czmc: '高亮',
      })
      cacheInde.value++
      cacheIndexs.value = 0
    }, num)
  })
}

const setImgOption = (obj: { img?: string; canMove?: boolean }) => {
  if (obj.img) {
    options.value.img = obj.img
  }
  if (obj.canMove !== undefined) {
    options.value.canMove = obj.canMove
  }
}

// 消图
const setImgCrop = () => {
  if (isCrop.value) {
    cropperRefss.value?.getCropFillData((data: string) => {
      fileUrl.value = data
      console.log(fileUrl.value)
      revokeList.value.push({
        img: fileUrl.value,
        czmc: '消图',
      })
      cacheInde.value++
      cacheIndexs.value = 0
    })
  }
}

// 撤销操作
const cacheInde = ref<number>(0)
const resetHistory = () => {
  nextTick(() => {
    cacheInde.value--
    cacheIndexs.value++
    fileUrl.value = lodash.cloneDeep(revokeList.value[cacheInde.value])?.img
  })
}
/*
 * 撤销
 */
const cacheIndexs = ref<number>(0)
const cxDisabled = computed(() => {
  return cacheInde.value === 0 || cacheIndexs.value === 5
})

// 获取url
const getObjectURL = (file: any) => {
  let url = null
  if (window.createObjectURL !== undefined) {
    // basic
    url = window.createObjectURL(file)
  } else if (window.URL !== undefined) {
    // mozilla(firefox)
    url = window.URL.createObjectURL(file)
  } else if (window.webkitURL !== undefined) {
    // webkit or chrome
    url = window.webkitURL.createObjectURL(file)
  }
  return url
}

// 恢复操作禁用判断
const hfDisabled = computed(() => {
  return revokeList.value.length - 1 === cacheInde.value
})

// 恢复
const restore = () => {
  nextTick(() => {
    cacheInde.value++
    cacheIndexs.value--
    fileUrl.value = lodash.cloneDeep(revokeList.value[cacheInde.value])?.img
  })
}

// 恢复原图
const recoveryClick = () => {
  // nextTick(() => {
  //   fileUrl.value = lodash.cloneDeep(revokeList.value[0]).img
  //   revokeList.value.splice(1)
  // })
  nextTick(() => {
    fileUrl.value = revokeList.value[0]?.img
    revokeList.value = [revokeList.value[0]]
    cacheInde.value = 0
    cacheIndexs.value = 0
  })
}

// 保存操作
/**
 * @param flag 是否自动保存(旋转、纠偏等需要调用接口的操作)
 */
const saveImg = () => {
  const file = base64ToFile(fileUrl.value, '保存')
  const formData = new FormData()
  formData.append('file', file)
  gdglService
    .singleUploadFile(formData, route.query.ajbh as string)
    .then((res) => {
      updateWjnr(res, file)
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

const updateWjnr = (res: any, file: any) => {
  const inputParams = {
    ajbh: store.nodeTreeData.ajbh as string,
    mlbh: store.nodeTreeData.bh as string,
    dthwjbhList: [props.currentItem.wjbh],
    wjxxList: [
      {
        wjmc: `${file.name}.${file.type.split('/')[1]}`,
        wjxh: res.data.wjxh,
      },
    ],
  }
  wsjzglService
    .updateWjnr(inputParams, route.query.ajbh as string)
    .then(() => {
      cacheInde.value = 0
      cacheIndexs.value = 0
      revokeList.value = []
      ElMessage({ type: 'success', message: '保存成功' })
      emit('refreshOperate', currentIndex.value)
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 上一页
const foundIndex = ref<any>()
const currentIndex = ref<any>(props.currentItem?.wjsxh - 1)

const lastPageClick = () => {
  foundIndex.value = props.wjxqxxList?.findIndex(
    (item: any) => item.wjsxh === props.currentItem?.wjsxh,
  )
  // 第一页终止
  if (foundIndex.value === 0) {
    ElMessage.warning('当前已是第一页')
    return
  }
  currentIndex.value = foundIndex.value - 1
  cacheInde.value = 0
  cacheIndexs.value = 0
  emit('indexChange', currentIndex.value)
}

const nextPageClick = () => {
  foundIndex.value = props.wjxqxxList?.findIndex(
    (item: any) => item.wjsxh === props.currentItem?.wjsxh,
  )
  // 最后一页终止
  if (foundIndex.value + 1 === props.wjxqxxList.length) {
    ElMessage.warning('当前已是最后一页')
    return
  }
  currentIndex.value = foundIndex.value + 1
  cacheInde.value = 0
  cacheIndexs.value = 0
  emit('indexChange', currentIndex.value)
}

// 刷新
const refresh = () => {
  emit('refreshOperate', currentIndex.value)
}

// 旋转刷新
const refreshRotate = (res: any) => {
  revokeList.value.push({
    img: fileUrl.value,
    czmc: '旋转',
  })
  fileUrl.value = 'data:image/png;base64,' + res.data[0]?.base64Str
  cacheInde.value++
  cacheIndexs.value = 0
}

const mode = ref('contain')
const changeMode = (val: string) => {
  options.value.mode = val
}

// 返回缩略图
const goBack = () => {
  close()
}

/**
 * base64转换file
 */
const base64ToFile = (base64: any, fileName: string) => {
  const arr = base64.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], fileName, { type: mime })
}

const imageUrlToBase64 = (url: any) => {
  let homeImage = new Image()
  // 解决跨域问题
  homeImage.setAttribute('crossOrigin', 'anonymous')
  homeImage.src = url
  //homeImage.onload为异步加载
  homeImage.onload = () => {
    let canvas = document.createElement('canvas')
    canvas.width = homeImage.width
    canvas.height = homeImage.height
    let context: any = canvas.getContext('2d')
    context.fillStyle = '#fff'
    context.fillRect(0, 0, homeImage.width, homeImage.height)
    context.drawImage(homeImage, 0, 0, homeImage.width, homeImage.height)
    let quality = 0.8
    // 这里的dataurl就是base64类型
    let dataURL = canvas.toDataURL('image/jpeg', quality)
    fileUrl.value = dataURL
    revokeList.value.push({
      img: fileUrl.value,
      czmc: '裁剪',
    })
    cacheInde.value++
    cacheIndexs.value = 0
  }
}
const convertBlobToBase64 = (blob: Blob) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => {
      resolve(reader.result) // 结果是一个 base64 字符串
    }
    reader.onerror = (error) => {
      reject(error)
    }
    reader.readAsDataURL(blob) // 转换为 Data URL
  })
}
const revokeList = ref<any[]>([])
watch(
  () => props.currentItem,
  (val: any) => {
    tempValue.value = val || {}
    wjfwService.downloadBlob({ wjbh: val.jpgwjxh }).then((blob: Blob) => {
      convertBlobToBase64(blob).then((res: any) => {
        let base64: string = res
        if (base64.startsWith('data:application/octet-stream')) {
          base64 = base64.replace('data:application/octet-stream', 'data:image/png') // 或者 data:image/jpeg
        }
        fileUrl.value = base64
        if (val.excludeRevoke) {
          revokeList.value = []
          cacheIndexs.value = 0
          revokeList.value.push({
            img: fileUrl.value,
            cxmc: '原图',
          })
        } else {
          cacheIndexs.value = 0
          revokeList.value.push({
            img: fileUrl.value,
            cxmc: '原图',
          })
        }
      })
    })
  },
  {
    deep: true,
    immediate: true,
  },
)

const isEditShow = computed(() => {
  if (mlxxStore.gdztData?.tgztdm === 'gd0150009' && mlxxStore.gdztData?.gdjddm === 'gd0180009') {
    return true
  }

  if (
    !mlxxStore.gdztData?.gdjddm ||
    mlxxStore.gdztData?.gdjddm === 'gd0180001' ||
    mlxxStore.gdztData?.gdjddm === 'gd0180005'
  ) {
    return true
  }

  if (
    mlxxStore.gdztData?.tglxdm === 'gd0040002' &&
    mlxxStore.gdztData?.ajlxdm.includes('gd0100001') &&
    props.wjxqxxList.value.some((item: any) => item.wjlydm === 'gd0300001')
  ) {
    return true
  }

  if (
    mlxxStore.gdztData?.tglxdm === 'gd0040002' &&
    mlxxStore.gdztData?.ajlxdm.includes('gd0100002') &&
    props.wjxqxxList.value.some((item: any) => item.wjlydm === 'gd0300002')
  ) {
    return true
  }
  return false
})
</script>

<template>
  <div class="container">
    <div class="top">
      <div class="top-title">
        <div class="topLeft" @click="goBack">
          <img src="@/assets/images/back1.png" alt="" />
          <p :title="store.$state.nodeTreeData?.mc">{{ store.$state.nodeTreeData?.mc }}</p>
        </div>
        <div class="topCenter">
          <div class="button-group">
            <div class="zoom-in" title="放大" @click="enlargeClick"></div>
            <div class="zoom-out-disabled" title="缩小" @click="narrowClick"></div>
            <el-select class="select-mode" v-model="mode" @change="changeMode">
              <el-option label="适合页面" value="contain"></el-option>
              <el-option label="适合页宽" value="100% auto"></el-option>
            </el-select>
            <div class="prev-btn" @click="lastPageClick" title="上一页"></div>
            <div class="next-btn" title="下一页" @click="nextPageClick"></div>
          </div>
          <!-- <el-popover placement="bottom" :width="100" trigger="hover">
        <ul class="export-excel">
          <li @click="rotateClick">旋转</li>
          <li @click="correctClick">纠偏</li>
          <li @click="clearBlackBorder">去黑边</li>
        </ul>
        <template #reference>
          <button class="btn_operation">
            <div class="btn-bj"></div>
            编辑
          </button>
        </template>
      </el-popover> -->
        </div>
      </div>

      <!-- <div class="topRight">
        <el-input placeholder="请输入查询关键字" suffix-icon="Search" />
      </div> -->

      <div class="rowbutton">
        <button
          class="btn_operation"
          @click="rotateClick"
          :disabled="
            !(
              (store.nodeTreeData?.cj === '2' || store.nodeTreeData?.mc === '待编目材料') &&
              mlxxStore.isUnlockReadOnly
            )
          "
        >
          <div class="btn-xuanzhuan" title="旋转"></div>
          <span>旋转</span>
        </button>
        <button
          class="btn_operation"
          @click="correctClick"
          :disabled="
            !(
              (store.nodeTreeData?.cj === '2' || store.nodeTreeData?.mc === '待编目材料') &&
              mlxxStore.isUnlockReadOnly
            )
          "
        >
          <div class="btn-jiupian" title="纠偏"></div>
          <span>纠偏</span>
        </button>
        <button
          class="btn_operation"
          @click="brightClick"
          :disabled="
            !(
              (store.nodeTreeData?.cj === '2' || store.nodeTreeData?.mc === '待编目材料') &&
              mlxxStore.isUnlockReadOnly
            )
          "
        >
          <div class="btn-liangdu" title="亮度"></div>
          <span>亮度</span>
        </button>
        <button
          class="btn_operation"
          @click="clearBlackBorder"
          :disabled="
            !(
              (store.nodeTreeData?.cj === '2' || store.nodeTreeData?.mc === '待编目材料') &&
              mlxxStore.isUnlockReadOnly
            )
          "
        >
          <div class="btn-quheibian" title="去黑边"></div>
          <span>去黑边</span>
        </button>

        <button
          class="btn_operation"
          @click="dragCrop"
          :disabled="
            !(
              (store.nodeTreeData?.cj === '2' || store.nodeTreeData?.mc === '待编目材料') &&
              mlxxStore.isUnlockReadOnly
            )
          "
        >
          <div class="btn-yidong" title="拖拽"></div>
          <span>拖拽</span>
        </button>

        <button
          class="btn_operation"
          @click="toggleCrop"
          :disabled="
            !(
              (store.nodeTreeData?.cj === '2' || store.nodeTreeData?.mc === '待编目材料') &&
              mlxxStore.isUnlockReadOnly
            )
          "
        >
          <div class="btn-kuangxuan" title="框选"></div>
          <span>框选</span>
        </button>
        <button
          class="btn_operation"
          @click="cropClick"
          :disabled="
            !(
              (store.nodeTreeData?.cj === '2' || store.nodeTreeData?.mc === '待编目材料') &&
              mlxxStore.isUnlockReadOnly
            )
          "
        >
          <div class="btn-caijian" title="裁剪"></div>
          <span>裁剪</span>
        </button>
        <button
          @click="setImgCrop"
          class="btn_operation"
          :disabled="
            !(
              (store.nodeTreeData?.cj === '2' || store.nodeTreeData?.mc === '待编目材料') &&
              mlxxStore.isUnlockReadOnly
            )
          "
        >
          <div class="btn-xiaotu" title="消图"></div>
          <span>消图</span>
        </button>
        <!-- <button
          class="btn_operation"
          :disabled="!(
              (store.nodeTreeData?.cj === '2' || store.nodeTreeData?.mc === '待编目材料') &&
              mlxxStore.isUnlockReadOnly
            )"
        >
          <div class="btn-secaijiaqiang" title="色彩加强"></div>
          <span>色彩加强</span>
        </button> -->
        <button
          class="btn_operation"
          @click="hbzqClick"
          :disabled="
            !(
              (store.nodeTreeData?.cj === '2' || store.nodeTreeData?.mc === '待编目材料') &&
              mlxxStore.isUnlockReadOnly
            )
          "
        >
          <div class="btn-heibaijiaqiang" title="黑白加强"></div>
          <span>黑白加强</span>
        </button>
        <button
          class="btn_operation"
          @click="saveImg()"
          :disabled="
            !(
              (store.nodeTreeData?.cj === '2' || store.nodeTreeData?.mc === '待编目材料') &&
              mlxxStore.isUnlockReadOnly
            )
          "
        >
          <div class="btn-baocun" title="保存"></div>
          <span>保存</span>
        </button>
        <button
          class="btn_operation"
          @click="resetHistory"
          :disabled="cxDisabled || !mlxxStore.isUnlockReadOnly"
        >
          <div class="btn-chexiao" title="撤销"></div>
          <span>撤销</span>
        </button>
        <button
          class="btn_operation"
          @click="restore"
          :disabled="hfDisabled || !mlxxStore.isUnlockReadOnly"
        >
          <div class="btn-huifu" title="恢复"></div>
          <span>恢复</span>
        </button>
        <button
          class="btn_operation"
          @click="recoveryClick"
          :disabled="
            !(
              (store.nodeTreeData?.cj === '2' || store.nodeTreeData?.mc === '待编目材料') &&
              mlxxStore.isUnlockReadOnly
            )
          "
        >
          <div class="btn-huifuyuantu" title="恢复原图"></div>
          <span>恢复原图</span>
        </button>
      </div>
    </div>

    <div class="preview-box">
      <div class="page-num">{{ currentItem.wjsxh }}/{{ props.wjxqxxList.length }}</div>
      <div class="cropper-box">
        <vueCropper
          ref="cropperRefss"
          :img="fileUrl"
          :mode="options.mode"
          :canMove="options.canMove"
          :canMoveBox="options.canMoveBox"
          :full="options.full"
          :outputSize="options.size"
          :outputType="options.outputType"
          :centerBox="options.centerBox"
          style="background-image: none"
        ></vueCropper>
      </div>
    </div>

    <!-- 旋转弹窗 -->
    <rotateDialog ref="rotateRef" @refresh="refreshRotate"></rotateDialog>
    <!-- 亮度弹窗 -->
    <ldDialog
      ref="ldRef"
      @refresh="refresh"
      :imgData="fileUrl"
      @submitBright="submitBright"
    ></ldDialog>
    <!-- 裁剪 -->
    <!-- 去黑边 -->
    <!-- <qhbDialog ref="qhbRef" @refresh="refresh"></qhbDialog> -->
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .top {
    width: 100%;
    display: flex;
    // justify-content: space-evenly;
    flex-direction: column;
    border-bottom: 1px solid #dae4f1;
    padding-bottom: 5px;
    margin-bottom: 5px;
    height: 82px;
    .top-title {
      height: 28px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      position: relative;
    }
    .topLeft {
      display: flex;
      cursor: pointer;
      position: absolute;
      img {
        padding-right: 5px;
        width: 22px;
        height: 15px;
        margin-top: 2px;
      }
      p {
        font-weight: 600;
        max-width: 260px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .topCenter {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      .button-group {
        width: 300px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        & > div:not(.select-mode) {
          margin-bottom: 7px;
        }
        .select-mode {
          width: 110px;
          :deep(.el-select__wrapper) {
            height: 28px;
            min-height: 28px;
          }
        }
      }
    }
  }
}

.rowbutton {
  width: 100%;
  display: flex;
  padding-bottom: 5px;
  .btn_operation {
    padding: 0 8px;
    min-width: 64px;
    white-space: nowrap;
  }

  .btn_operation + .btn_operation {
    margin-left: 6px;
  }

  @media screen and (max-width: 1680px) {
    .btn_operation {
      min-width: 34px;
      div {
        margin-right: 0;
      }
      span {
        display: none;
      }
    }
  }
}

.preview-box {
  position: relative;
  height: calc(100% - 85px);
  .page-num {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 99;
  }
}
.footer {
  text-align: right;
}
.export-excel {
  li {
    text-align: center;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    &:hover {
      background-color: #ecf5ff;
      color: #266df5;
    }
  }
}

:deep(.cropper-box) {
  width: 100%;
  height: 100%;
  background-color: #f7f8f9;
  :deep(.cropper-box-canvas) {
    width: 100% !important;
    height: 100% !important;
  }
}
</style>
